<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="得闲技术 Team">
    <meta name="copyright" content="得闲技术">
    <title>管理员列表 - Powered By 得闲技术</title>
    [#include "/admin/main/resources/list.ftl"/]
</head>
<body class="admin secondary">
<main>
    <div class="container-fluid">
        [#assign activeBreadcrumb= "管理员"/]
        [#include  "/admin/main/breadcrumb.ftl"/]
        <form action="list" method="get">
            <div id="filterModal" class="modal fade" tabindex="-1" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" type="button" data-dismiss="modal">×</button>
                            <h5 class="modal-title">更多选项</h5>
                        </div>
                        <div class="modal-body form-horizontal">

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="departmentId">部门:</label>
                                <div class="col-xs-10 col-sm-8">
                                    <select name="departmentId" id="departmentId" class="selectpicker form-control"
                                            data-live-search="true">
                                        <option value="">请选择</option>
                                        [#list departments as department]
                                            <option value="${department.id}"
                                                    [#if form.departmentId==department.id]selected="selected"[/#if]
                                                    [#if departmentIds ?? && !departmentIds?seq_contains(department.id)]disabled="disabled"[/#if]
                                            >
                                                [#if department.grade != 0]
                                                    [#list 1..department.grade as i]
                                                        &nbsp;&nbsp;
                                                    [/#list]
                                                [/#if]
                                                ${department.name}
                                            </option>
                                        [/#list]
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="isEnabled">是否启用:</label>
                                <div class="col-xs-10 col-sm-8">
                                    <select name="isEnabled" id="isEnabled" class="selectpicker form-control"
                                            data-live-search="true">
                                        <option value="">请选择</option>
                                        <option value="true"
                                                [#if (form.isEnabled?? && form.isEnabled)]selected="selected"[/#if]>启用
                                        </option>
                                        <option value="false"
                                                [#if (form.isEnabled?? && !form.isEnabled)]selected="selected"[/#if]>禁用
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="isAccountNonLocked">是否锁定:</label>
                                <div class="col-xs-10 col-sm-8">
                                    <select name="isAccountNonLocked" id="isAccountNonLocked"
                                            class="selectpicker form-control" data-live-search="true">
                                        <option value="">请选择</option>
                                        <option value="false"
                                                [#if (form.isAccountNonLocked?? && form.isAccountNonLocked)]selected="selected"[/#if]>
                                            已锁定
                                        </option>
                                        <option value="true"
                                                [#if (form.isAccountNonLocked?? && !form.isAccountNonLocked)]selected="selected"[/#if]>
                                            未锁定
                                        </option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" type="submit">确 定</button>
                            <button class="btn btn-default reset-all" type="button">重 置</button>
                            <button class="btn btn-default" type="button" data-dismiss="modal">取 消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-12 col-sm-7">
                            <div class="btn-group">
                                [@hasPermission name="admin:save" ]
                                    <a class="btn btn-default" href="save" data-redirect-url="list">
                                        <i class="iconfont icon-add"></i>添加
                                    </a>
                                [/@hasPermission]

                                [@hasPermission name="admin:delete" ]
                                    <button class="btn btn-default" type="button" data-action="delete" disabled>
                                        <i class="iconfont icon-close"></i>删除
                                    </button>
                                [/@hasPermission]

                                <button class="btn btn-default" type="button" data-action="refresh">
                                    <i class="iconfont icon-refresh"></i>刷新
                                </button>
                                <button class="btn btn-default" type="button" data-toggle="modal"
                                        data-target="#filterModal">高级搜索
                                </button>
                                [#include "/admin/main/list/page_select.ftl" /]
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-5">
                            <div id="search" class="input-group">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="button" data-toggle="dropdown">
                                        <span class="search-span">姓名</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li data-search-property="name">
                                            <a href="javascript:;">姓名</a>
                                        </li>
                                        <li data-search-property="username">
                                            <a href="javascript:;">用户名</a>
                                        </li>
                                        <li data-search-property="mobile">
                                            <a href="javascript:;">手机号码</a>
                                        </li>
                                    </ul>
                                </div>
                                <input name="searchValue" class="form-control" type="text"
                                        value="${form.searchValue}" placeholder="搜 索"
                                        x-webkit-speech="x-webkit-speech" x-webkit-grammar="builtin:search">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit">
                                        <i class="iconfont icon-search"></i>
                                        <span class="text-danger">[#if page??]${page.total!0}[#else]0[/#if]</span>条 /
                                        <span class="text-danger">${page.totalPages!0}</span>页</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body padding-10">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <div class="checkbox">
                                        <input type="checkbox" data-toggle="checkAll">
                                        <label></label>
                                    </div>
                                </th>
                                <th>
                                    <a href="javascript:;" data-order-property="name">
                                        姓名
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="javascript:;" data-order-property="username">
                                        用户名
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="javascript:;" data-order-property="mobile">
                                        手机号码
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="javascript:;" data-order-property="departmentId">
                                        部门
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>

                                <th>
                                    <a href="javascript:;" data-order-property="isEnabled">
                                        启用
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="javascript:;" data-order-property="isAccountNonLocked">
                                        锁定
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="javascript:;">
                                        登录信息
                                    </a>
                                </th>
                                <th>
                                    <a href="javascript:;" data-order-property="createDate">
                                        创建时间
                                        <i class="iconfont icon-biaotou-kepaixu"></i>
                                    </a>
                                </th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            [#list page.content as content]
                                <tr>
                                    <td>
                                        <div class="checkbox">
                                            <input name="ids" type="checkbox"
                                                    value="${content.id}"><label></label>
                                        </div>
                                    </td>
                                    <td>
                                        [#if content.avatar?? && content.avatar !=""]
                                            <a href="${imageHost}${content.avatar}" target="_blank"
                                                    data-toggle="tooltip"
                                                    data-html="true" data-placement="right"
                                                    title="<img src='${imageHost}${content.avatar}' class='img-responsive' width='200'/>">
                                                ${content.name}
                                            </a>
                                        [#else]
                                            ${content.name}
                                        [/#if]
                                        （${message("GenderEnum." + content.gender)}）
                                    </td>
                                    <td>
                                        ${content.username}
                                    </td>
                                    <td>
                                        ${content.mobile}
                                    </td>
                                    <td>
                                        [#list departments as department]
                                            [#if department.id == content.departmentId]
                                                ${department.name}
                                            [/#if]
                                        [/#list]
                                    </td>
                                    <td>
                                        [#if content.isEnabled]
                                            <i class="text-green iconfont icon-check"></i>
                                        [#else]
                                            <i class="text-danger iconfont icon-close"></i>
                                        [/#if]
                                    </td>
                                    <td>
                                        [#if !content.isAccountNonLocked]
                                            <i class="text-green iconfont icon-check" title="${content.lockedDate}"
                                                    data-toggle="tooltip"></i>
                                        [#else]
                                            <i class="text-danger iconfont icon-close"></i>
                                        [/#if]
                                    </td>
                                    <td>
                                        <p title="${(content.loginDate?string(" yyyy-MM-dd HH:mm:ss"))!}"
                                                data-toggle="tooltip">
                                            <span class="text-gray">最后登录：</span>${(content.loginDate?string("yyyy-MM-dd"))!}
                                        </p>
                                        <p>
                                            <span class="text-gray">登录IP：</span>${content.loginIp}
                                        </p>
                                    </td>
                                    <td>
                                        <span title="${(content.createDate?string(" yyyy-MM-dd HH:mm:ss"))!}"
                                                data-toggle="tooltip">
                                            ${(content.createDate?string("yyyy-MM-dd"))!}
                                        </span>
                                    </td>
                                    <td>

                                        [@hasPermission name="admin:update" ]
                                            <a class="btn btn-default btn-xs btn-icon"
                                                    href="update?id=${content.id}" data-redirect-url="list">
                                                <i class="iconfont icon-write"></i> 编辑
                                            </a>
                                        [/@hasPermission]

                                        [#if content.isOnline?? && content.isOnline]
                                            <a class="btn btn-default btn-xs btn-icon confirm-modal"
                                                    href="#" data-id="${content.id}" data-action="force_logout" title="强制退出" data-toggle="tooltip">
                                                <i class="iconfont icon-forward"></i> 强退
                                            </a>
                                        [/#if]


                                        <!-- Single button -->
                                        <div class="btn-group">
                                            <button type="button"
                                                    class="btn btn-default btn-xs btn-icon dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                其他 <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">

                                                [@hasPermission name="admin:enableOrDisable" ]
                                                    <li>
                                                        <a class="confirm-modal" href="#" data-id="${content.id}"
                                                                data-action="enable_or_disable">[#if content.isEnabled]禁用[#else]启用[/#if]</a>
                                                    </li>
                                                [/@hasPermission]

                                                [@hasPermission name="admin:lockOrUnlock" ]
                                                    <li>
                                                        <a class="confirm-modal" href="#" data-id="${content.id}"
                                                                data-action="lock_or_unlock">[#if content.isAccountNonLocked]锁定[#else]解锁[/#if]</a>
                                                    </li>
                                                [/@hasPermission]

                                                [@hasPermission name="admin:modifyPassword" ]
                                                    <li><a href="#" data-id="${content.id}" class="modify-password" data-toggle="modal" data-target="#modifyPasswordModal">修改密码</a></li>
                                                [/@hasPermission]

                                                [@hasPermission name="admin:modifyMobile" ]
                                                    <li><a href="#" data-id="${content.id}" data-mobile="${content.mobile}" class="modify-mobile" data-toggle="modal" data-target="#modifyMobileModal">修改手机号码</a></li>
                                                [/@hasPermission]

                                                [@hasPermission name="admin:modifyRole" ]
                                                    <li><a href="modify_role?id=${content.id}" data-redirect-url="list">修改角色</a></li>
                                                [/@hasPermission]

                                            </ul>
                                        </div>

                                    </td>
                                </tr>
                            [/#list]
                            </tbody>
                        </table>
                    </div>
                </div>
                [@pagination pageNumber=page.pageNumber totalPages = page.totalPages]
                    [#include "/admin/main/list/pagination.ftl" /]
                [/@pagination]
            </div>
        </form>

        <form action="" method="POST" id="ajaxForm">
            <input type="hidden" name="id" value="" />
        </form>

        [#include "/admin/admin/admin/mobile_modal.ftl"/]
        [#include "/admin/admin/admin/password_modal.ftl"/]
    </div>
</main>
<script>
    $(document).ready(function () {
        var $ajaxForm = $("#ajaxForm");
        var $modifyPasswordForm =$("#modifyPasswordForm");
        var $modifyMobileForm=$("#modifyMobileForm");

        $(".confirm-modal").click(function () {
            let id = $(this).data("id");
            let action = $(this).data("action");

            $ajaxForm.attr("action", action);
            $ajaxForm.find("input[name='id']").val(id);

            bootbox.confirm("您确定执行该操作吗？", function (isConfirm) {
                if (isConfirm) {
                    $ajaxForm.ajaxSubmit({
                        successRedirectUrl: "list"
                    });
                }
            });
        });

        $(".modify-password").click(function(){
            let id = $(this).data("id");
            $modifyPasswordForm.find("input[name='id']").val(id);
        })

        $(".modify-mobile").click(function(){
            let id = $(this).data("id");
            let oldMobile=$(this).data("mobile");
            $modifyMobileForm.find("input[name='id']").val(id);
            $modifyMobileForm.find("input[name='oldMobile']").val(oldMobile);
        })

        // 清除id内容
        $("#modifyPasswordModal,#modifyMobileModal").on("hide.bs.modal", function(){
            $modifyPasswordForm.find("input[name='id']").val("");
            $modifyMobileForm.find("input[name='id']").val("");
            $modifyMobileForm.find("input[name='oldMobile']").val("");
        });

        // 表单验证
        $modifyPasswordForm.validate({
            rules: {
                rePassword: {
                    equalTo: "#password"
                },
            },
            messages: {
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    successRedirectUrl: "list"
                });
            }
        });

        // 表单验证
        $modifyMobileForm.validate({
            rules: {
            },
            messages: {
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    successRedirectUrl: "list"
                });
            }
        });

    })
</script>
</body>
</html>
